<template>
	<view class="detail-wrapper" :style="{paddingTop: paddingTop + 'px'}">
		<navBar title="质保详情" backgroundColor="#312F33" fontColor="#fff" :customBack="true" @back="back" />
		<view class="detail-bg" :style="{top: paddingTop + 'px'}"></view>
		<view class="detail-content">
			<view class="detail-card" :class="{'post-active':detailInfo.insuranceState == 3}">
				<view class="img">
					<image
						:src="detailInfo.insuranceState == 1?'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/guarantee/status_bg.png':'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/guarantee/status_bg1.png'">
					</image>
				</view>
				<view class="card-info">
					<view class="card-title">{{ detailInfo.insuranceName }}</view>
					<view class="date">质保单号：{{ detailInfo.insuranceNumber }}
						<image
							:src="detailInfo.insuranceState == 1?'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/guarantee/copy.png':'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/guarantee/copy1.png'"
							@click="onCopy(detailInfo.insuranceNumber)">
						</image>
					</view>
					<view class="num">关联订单：{{ detailInfo.orderNo }}
						<image
							:src="detailInfo.insuranceState == 1?'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/guarantee/copy.png':'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/guarantee/copy1.png'"
							@click="onCopy(detailInfo.orderNo)">
						</image>
					</view>
					<view class="exprie-time" v-if="detailInfo.startTime">
						保障期限：{{detailInfo.startTime.slice(0,10)}}至{{detailInfo.endTime.slice(0,11)}}
					</view>
					<view class="status">
						<view class="tag">{{detailInfo.insuranceState == 1?'质保中':'已过期'}}</view>
					</view>
				</view>
			</view>
			<view class="goods-list">
				<view class="title">保障内容</view>
				<view class="list-item" v-for="(item,index) in detailInfo.goodsList" :key="item.goodsId">
					<view class="goods-img">
						<image
							:src="item.goodsImg?item.goodsImg:'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/order/goods_default_square.png'">
						</image>
					</view>
					<view class="goods-info">
						<view class="goods-name">{{ item.goodsName }}</view>
						<!-- <view class="goods-type">{{ item.goodsModel }}</view> -->
						<view class="count">
							×{{ item.quality }}
							<text style="color:#DCB17E;margin-left: 10rpx;" v-if="item.useCount>0">
							{{'(已质保'+item.useCount+'条)'}}
							</text>
						</view>
						<view class="btn" v-if="detailInfo.insuranceState == 1&&item.show">
							<u-button type="primary" text="申请售后质保" :plain="true" size="small"
								@click="onApply(detailInfo,index)"></u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="person-info" v-if="detailInfo.userName">
				<view class="title">投保人信息</view>
				<view class="cell-box">
					<view class="cell">
						<view class="label">姓名：</view>
						<view class="info">
							{{ (detailInfo.userName).substr(0,1)+new Array(detailInfo.userName.length).join('*') }}
						</view>
					</view>
					<!-- 					<view class="cell">
						<view class="label">身份证号：</view>
						<view class="info">{{ detailInfo.idCard }}</view>
					</view> -->
					<view class="cell">
						<view class="label">投保人电话：</view>
						<view class="info">{{ (detailInfo.phone).replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2') }}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/common/config'
	import navBar from '@/components/navBar.vue'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				detailInfo: {},
				paddingTop: '',
				resubmit:0
			}
		},
		methods: {
			back() {
				if(this.resubmit){
					uni.navigateTo({
						url: `/indexPack/guarantee/index?id=1`
					});
				}else{
					// uni.navigateTo({
					// 	url: `/indexPack/guarantee/index?id=1`
					// });
					uni.navigateBack();
				}
				
			},
			async getDetailInfo(id) {
				try {
					const res = await this.$request({
						method: 'get',
						url: `/ltb-center/union-insurance/detail/${id}`,
					})

					if (res.datas.insuranceState == 2) {
						res.datas.insuranceState = 1
					}		
					res.datas.goodsList.forEach(item => {
						item.show = false
						item.useCount = 0
						item.insuranceItems.forEach(list => {
							if (list.claimId == null) {
								item.show = true
							}else{
								item.useCount ++
							}
						})
					})
					this.detailInfo = res.datas
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}

				uni.stopPullDownRefresh();
			},
			//复制
			onCopy(data) {
				uni.setClipboardData({
					data: data, // 复制的内容 
					success: function() {
						console.log('success');
						uni.showToast({
							title: '复制成功',
							duration: 1000
						})
					}
				});
			},
			onApply(data, index) {
				uni.navigateTo({
					url: '/indexPack/guarantee/applyForForm',
					success: (res) => {
						res.eventChannel.emit('formInfo', {
							data: data,
							index: index
						})
					}
				})
			},
		},
		onLoad(option) {
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			uni.showLoading({
				title: '加载中...'
			})
			this.resubmit = option.resubmit?option.resubmit:0
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('detailInfo', this.getDetailInfo(option.id))
		},

	}
</script>

<style lang="scss" scoped>
	.detail-wrapper {
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);

		.detail-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 300rpx;
			background: #312F33;
			z-index: 0;
			border-bottom-left-radius: 100rpx;
			border-bottom-right-radius: 100rpx;
		}

		.detail-content {
			position: relative;
			z-index: 1;
			width: calc(100% - 40rpx);
			margin-left: 20rpx;

			.detail-card {
				margin-top: 30rpx;
				width: 100%;
				height: 396rpx;
				position: relative;

				.img {
					width: 100%;
					height: 100%;
					position: absolute;
					z-index: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.card-info {
					position: relative;
					z-index: 1;
					padding-top: 74rpx;
					padding-left: 42rpx;
					padding-right: 42rpx;

					.card-title {
						color: #7E5621;
						font-size: 26px;
						font-weight: normal;
						margin-bottom: 30rpx;
					}

					.date {
						margin-bottom: 10rpx;
						font-size: 12px;
						display: flex;
						color: #7E5621;

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					.num {
						display: flex;
						font-size: 12px;
						color: #7E5621;
						margin-bottom: 10rpx;

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					.exprie-time {
						display: flex;
						font-size: 12px;
						color: #7E5621;
					}

					.status {
						margin-top: 20rpx;
						display: flex;
						justify-content: flex-end;

						.tag {
							padding: 10rpx 18rpx;
							color: #9A764A;
							font-size: 14px;
							border-radius: 56rpx 56rpx 56rpx 56rpx;
							border: 2rpx solid #B49166;
						}
					}

				}
			}

			.post-active {
				.card-info {
					.card-title {
						color: #3E3E3E;
					}

					.date {
						color: #666666;
					}

					.num {
						color: #666666;
					}

					.exprie-time {
						color: #666666;
					}

					.status {
						.tag {
							color: #3E3E3E;
							border: 2rpx solid #3E3E3E;
						}
					}
				}
			}

			.goods-list {
				background: #FFFFFF;
				border-radius: 12rpx;
				margin-top: 20rpx;

				.title {
					padding: 32rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
					border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				}

				.list-item {
					padding: 16rpx 32rpx;
					display: flex;
					align-items: center;

					.goods-img {
						width: 160rpx;
						height: 160rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.goods-info {
						width: calc(100% - 180rpx);

						.goods-name {
							width: 100%;
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85);
							font-size: 15px;
							word-wrap: break-all;
							overflow: hidden;
							line-break: anywhere;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.goods-type {
							font-size: 12px;
							margin-top: 14rpx;
							color: rgba(0, 0, 0, 0.65);
						}

						.count {
							font-size: 14px;
							font-weight: 500;
							margin-top: 30rpx;
							margin-bottom: 20rpx;
							color: rgba(0, 0, 0, 0.85);

						}

						.btn {
							height: 80rpx;
							border-bottom: 1px solid rgba(0, 0, 0, 0.1);

							/deep/ .u-button {
								float: right;
								width: 180rpx !important;
							}
						}

					}
				}

			}

			.person-info {
				background: #FFFFFF;
				border-radius: 12rpx;
				margin-top: 20rpx;

				.title {
					padding: 32rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
					border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				}

				.cell-box {
					padding: 16rpx 32rpx;

					.cell {
						display: flex;
						margin-bottom: 32rpx;

						.label {
							font-size: 14px;
							width: 180rpx;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.45);
							text-align: left;
						}

						.info {
							flex: 1;
							font-size: 14px;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.85);
						}
					}
				}
			}
		}
	}
</style>